import { useState, useMemo, useEffect } from 'react';
import { Checkbox } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { TextWidget, getMessage } from '@inbiz/react';
import PopoverComponent from './PopoverComponent';
import MultilingualInput from '../../.././../../MultilingualInput';
import { defaultReturnsBackButtonConfig } from '../../../utils';
import '../style.less';

export default function ReturnsBack(props) {
    const { value, onChange, form } = props;
    const [popoverVisible, setPopoverVisible] = useState(false);
    const [returnsBackButtons, setReturnsBackButtons] = useState<any[]>([]);

    const buttonItem = useMemo(() => {
        return value?.find((item) => item?.action == 'returnsBack');
    }, [value]);

    const onCheckChange = (e: { target: { checked: boolean; }; }) => {
        const _value = value?.map((item) => {
            if (item?.action == 'returnsBack') {
                return {
                    ...item,
                    enable: e?.target?.checked,
                }
            } else {
                return item;
            };
        });
        onChange(_value);
    };

    const onTextChange = () => {
        const _value = value?.map((item) => {
            if (item?.action == 'returnsBack') {
                return {
                    ...item,
                    enable: !buttonItem?.enable,
                }
            } else {
                return item;
            };
        });
        onChange(_value);
    };

    const onInputChange = (val: string) => {
        const _value = value?.map((item) => {
            if (item?.action == 'returnsBack') {
                return {
                    ...item,
                    name: val,
                }
            } else {
                return item;
            };
        });
        onChange(_value);
    };

    const onFormReturnsBackChange = (newButtons: any[]) => {
        const _buttonSetting = form?.getFieldsValue()?.buttonSetting;
        form?.setFieldValue('buttonSetting', {
            ..._buttonSetting,
            returnsBackButtonConfig: newButtons,
        });
    };

    const onReturnsBackCheckChange = (action: string, e?: { target: { checked: boolean; }; }) => {
        let _returnsBackButtons: any[] = [];
        if (!e) {
            _returnsBackButtons = returnsBackButtons?.map((item) => {
                if (item?.action == action) {
                    return {
                        ...item,
                        enable: !item?.enable,
                    };
                } else {
                    return item;
                };
            });
        } else {
            const checked = e?.target?.checked;
            _returnsBackButtons = returnsBackButtons?.map((item) => {
                if (item?.action == action) {
                    return {
                        ...item,
                        enable: checked,
                    };
                } else {
                    return item;
                };
            });
        };
        setReturnsBackButtons(_returnsBackButtons);
        onFormReturnsBackChange(_returnsBackButtons);
    };

    const onReturnsBackInputChange = (val: string, action: string) => {
        const _returnsBackButtons = returnsBackButtons?.map((item) => {
            if (item?.action == action) {
                return {
                    ...item,
                    text: val,
                };
            } else {
                return item;
            };
        });
        setReturnsBackButtons(_returnsBackButtons);
        onFormReturnsBackChange(_returnsBackButtons);
    };

    useEffect(() => {
        const _buttonSetting = form?.getFieldsValue()?.buttonSetting;
        if (!_buttonSetting?.returnsBackButtonConfig || _buttonSetting?.returnsBackButtonConfig && _buttonSetting?.returnsBackButtonConfig?.length == 0) {
            setReturnsBackButtons(defaultReturnsBackButtonConfig);
            form?.setFieldValue('buttonSetting', {
                ..._buttonSetting,
                returnsBackButtonConfig: defaultReturnsBackButtonConfig,
            });
        } else {
            setReturnsBackButtons(_buttonSetting?.returnsBackButtonConfig);
        };
    }, [form?.getFieldsValue()?.buttonSetting]);

    return (
        <>
            <div className='process-designer-button'>
                <Checkbox checked={buttonItem?.enable} onChange={onCheckChange} />
                <div className='process-designer-button-text' title='退回' onClick={onTextChange} >退回</div>
                {
                    buttonItem?.enable
                    &&
                    <>
                        <MultilingualInput value={buttonItem?.name} onChange={onInputChange} />
                        <PopoverComponent
                            popoverVisible={popoverVisible}
                            setPopoverVisible={setPopoverVisible}
                            value={value}
                            onChange={onChange}
                            type='returnsBack'
                        />
                    </>
                }
            </div>
            {
                buttonItem?.enable
                &&
                <div className='process-designer-button-config'>
                    {
                        returnsBackButtons?.map((item) => {
                            return (
                                <div className='process-designer-button-config-returnsBack-item' key={item?.action}>
                                    <div className='process-designer-button-config-returnsBack-item-left'>
                                        <Checkbox checked={item?.enable} onChange={(e) => { onReturnsBackCheckChange(item?.action, e) }} />
                                        <div className='process-designer-button-config-returnsBack-item-text' title={getMessage(item?.actionLang)} onClick={() => { onReturnsBackCheckChange(item?.action); }}><TextWidget>{item?.actionLang}</TextWidget></div>
                                        <ExclamationCircleOutlined title={item?.title} style={{ cursor: 'pointer' }} />
                                    </div>
                                    <MultilingualInput value={item?.text} onChange={(val: string) => { onReturnsBackInputChange(val, item?.action) }} />
                                </div>
                            )
                        })
                    }
                </div>
            }
        </>
    )
};